<template>
  <!--我的审批-公共审批-组件 -->
  <section class="component case-approval-common">
    <el-form :model="listQuery" :rules="rules" label-width="100px" ref="form">
      <el-form-item label="审批意见" prop="approvalOpinion">
        <el-input type="textarea" v-model.trim="listQuery.approvalOpinion" clearable :maxlength="300" show-word-limit></el-input>
      </el-form-item>
    </el-form>
    <div class="confirm-button">
      <el-button @click="commit('REJECT')">拒绝</el-button>
      <el-button @click="commit('PASS')">同意</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"
import { Dependencies } from "~/core/decorator"
import { Emit, Prop, Watch } from "vue-property-decorator"
import { CaseApplyRecordService } from "~/services/domain-service/case-apply-record.service"
import { Form } from 'element-ui'

@Component({
  components: {}
}) 
export default class CaseApprovalCommon extends Vue {
  public $refs: { form: Form }

  @Dependencies(CaseApplyRecordService)
  private caseApplyRecordService: CaseApplyRecordService

  private rules: any = {
    approvalOpinion: [{ required: true, message: "请输入审批意见" }]
  }
  private listQuery: any = {
    applyStatus: "PASS",
    approvalOpinion: "",
    id: []
  }

  @Prop({ required: true }) private rowId: any

  @Emit("close") private close() {
    this.reset()
  }

  private reset() {
    const form: any = this.$refs["form"]
    form.resetFields()
  }

  private async commit(applyStatus) {
    const result = await this.$refs.form.validate().then(() => true).catch(() => false)
    if (!result) return
    this.listQuery.applyStatus = applyStatus
    this.listQuery.id = this.rowId
    this.caseApplyRecordService.dealApply(this.listQuery).subscribe(
      data => {
        this.$message.success("操作成功")
        this.close()
      },
      err => {
        this.close()
      }
    )
  }
}
</script>

<style lang="less" scoped>
/*deep*/.form-name{
  display: inline-block;
  min-width: 33%;
}
/*deep*/.applicant .el-input{
  width: 100% !important;
}
</style>
<style lang="less">
.component.case-approval-common {
  .data-box > * {
    padding: 0 !important;
  }
}
</style>
